<template>
	<!-- <input /><button>搜索</button> -->
  <div class="app-container">
    <div v-loading="loading"
    element-loading-spinner="el-icon-loading"
    class="left"
    id="viz1"
    ref="viz1"
    style="width:100%;height:666px" ></div>
  </div>
</template>

<script>
import NeoVis from 'neovis.js';
import request from '@/utils/request'

export default {
  name: "index",

  data() {
    return {
      viz: "",
      // 表单参数
      appConfig: {},

     // SQL: "MATCH p=()-->() RETURN p",
	  SQL: "MATCH p=()-[r:`总关系`]->() RETURN p "

	  //SQL: "MATCH p=(n:关系图)-[r:`总关系`]->() where n.name='中样生产工艺标准' RETURN p"

    }
  },
  created() {
  },

  mounted() {

    this.draw();
  },


  methods: {

    draw(sql) {

      request({
        url: '/getNeo',
        method: 'get'
      }).then(response => {
             // 处理返回的属性值
             this.appConfig = response.data;
             //console.log(this.appConfig.uri);
             //console.log(this.appConfig.username);
             //console.log(this.appConfig.password);
         })
         .catch(error => {
             // 错误处理
             console.error(error);
         });
      //  this.canvas = document.getElementById("js-canvas");
      var viz1 = this.$refs.viz1;
      var viz;
      console.log(viz1);

      var config = {
        container_id: "viz1",

        server_url: this.appConfig.uri,
        server_user: this.appConfig.username,
        server_password: this.appConfig.password,

        labels: {
          "关系图": {
                      caption: "name",
                      community: 'community',
                      // group: 'community',
                      size: 'pagerank',
                      // image: '',
                      font: { size: 14, color: '#606266' },
                    }
        },


        relationships: {
          "总关系": {
                       thickness: 'weight',  //String：线段粗细，用作边缘厚度的属性名。默认为1。
                       caption: 'relation',  //Boolean：如果设置为true，则关系类型将显示为边缘标题。或String：用作边缘标题的属性名。
                       font: { size: 12, color: '#606266' }  // 关系节点文字大小颜色
                    }
        },
        arrows: true,



        initial_cypher: this.SQL,
      };

      viz = new NeoVis(config);
      viz._container = viz1;
      viz.render();
    },

    queryInfo() {
      // this.basePolicyDeviationList()
    },


  }
}
</script>

<style>
</style>
